import React, { Component } from 'react';
import { version, Button, ConfigProvider,DatePicker,message   } from 'antd';
import 'antd/dist/antd.css';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/es/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

class Antd extends Component {
  

  state = {
    date: null,
  };

  handleChange = date => {
    message.info(`您选择的日期是: ${date ? date.format('YYYY-MM-DD') : '未选择'}`);
    this.setState({ date });
  };
 
  render() {
    const { date } = this.state;

    return (
      <div >
        {/* <div>Current antd version: {version}</div> */}
        <div style={{ marginTop: '16px'}}>
          <Button type="primary">Example button</Button>
        </div>
        
        <ConfigProvider locale={zhCN} >
          <div style={{ width: 400, margin: '100px auto' }}>
            <DatePicker onChange={this.handleChange} />
            <div style={{ marginTop: 20 }}>
              当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
            </div>
          </div>
        </ConfigProvider>
      </div>

    );
  }



}

export default Antd;
